import React from "react";
import {NavLink, Outlet, Route, Routes} from  "react-router-dom"

import News from "./News"
import Message from "./Message"
import Detail from "./Message/Detail"

export default function Home() {
  return (
    <div>
      <nav>
        <NavLink to="news">News</NavLink>&nbsp;|&nbsp;
        <NavLink to="message">Message</NavLink>
      </nav>
      { 
      //<Outlet />
      // 嵌套路由的两种写法
      }
      <Routes>
        <Route path="news" element={<News />} />
        <Route path="message" element={<Message />} >
          {
          // 接收params参数
          // <Route path=":id/:title/:content" element={<Detail />} />
          // search参数无需声明接收
          // <Route path="" element={<Detail />} />
          // state参数无需声明接收
          // 解决选中message导航刷新时仍然显示空detail的问题
          // <Route path="detail" element={<Detail />} />
          }
          <Route path=":id/:title/:content" element={<Detail />} />

        </Route>
      </Routes>
    </div>
  );
}
